<template>
	<view>
		<loading
			ref="loading"
			:custom="false"
			:type="1">
		</loading>
		<view class="fixed">
			<!-- 状态栏 -->
			<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
			<view class="myheader padding-sm  flex justify-between">
				<view class="font-sub-title">
					<text class="cuIcon-back margin-right-ssm" @click="back()"></text>
					我的运动
				</view>
				<picker mode="date" :value="date" @change="bindDateChange">
					<text class="font-sub-title cuIcon-calendar"></text>
				</picker>			
			</view>
		</view>
		<exercisechart :title="date==now?'今日运动':date" :style="{marginTop:navHeight}" :categories="categories" :series="series"></exercisechart>
		<view class="padding text-center" v-if="varList.length!=0">
			<view class="flex align-center justify-between text-center margin-top-sm">
				<view class="flex-sub right-border text-blue">
					<view class="font-small"><text class="iconfont font-sub-title margin-right-sm" style="color: #e39311;">&#xe739;</text>总步数</view>
					<view class="font-small">
						<view class="cu-avatar sm round margin-right-xs bgpoint" style="background-color:#e39311"></view>{{stepValue}} 步
					</view>
				</view>
				<view class="flex-sub right-border text-orange">
					<view class="font-small"><text class="iconfont font-sub-title text-blue margin-right-sm">&#xe63c;</text>距离</view>
					<view class="font-small">
						<view class="cu-avatar sm round margin-right-xs bgpoint" style="background-color:#427EE3"></view>{{distance}} 千米
					</view>
				</view>
				<view class="flex-sub text-purple">
					<view class="font-small"><text class="iconfont font-sub-title text-red margin-right-sm">&#xe609;</text>卡路里</view>
					<view class="font-small"><view class="cu-avatar sm round margin-right-xs bgpoint" style="background-color:rgb(216,30,6)"></view>{{calorie}} cal</view>
				</view>
			</view>
		</view>
		<view v-if="varList.length!=0" class="cu-list menu sm-border my-list">
			<view class="cu-item" v-for="data in varList">
				<view class="content margin-left">
					<text class="iconfont font-sub-title text-blue margin-right-sm">&#xe6a2;</text>
					<text class="margin-right font-normal">{{data.sportStep}}</text>
				</view>
				<view class="action margin-right">
					<view class="font-small">{{data.startTime.substring(11,16)}}——{{data.endTime.substring(11,16)}}</view>
				</view>
			</view>
		</view>
		<view v-else class="no_data">
			<image src="../../static/img/no_data.png" class="no_data_img" mode="widthFix"></image>
			<view class="font-sub-title">暂无数据</view>
		</view>
	</view>
</template>

<script>
	import exercisechart from '@/pages/health/exercisechart/index.vue'
	import Vue from 'vue'
	import {formatDateDay} from '@/utils/datetime.js'
	import {
		mapGetters
	} from 'vuex'
	import {getStatistic,stepStandard} from '@/utils/standard.js'
	var that;
	export default {
		components: {
			exercisechart
		},
		computed:{
			...mapGetters(['navHeight']),
		},
		data() {
			return {
				varList:[],
				categories:[],
				series:[],
				statusBarHeight:Vue.prototype.StatusBar,
				date:'',
				now:'',
				stepValue:'',
				distance:'',
				calorie:''
			}
		},
		onLoad() {
			that = this;
			this.date = formatDateDay(new Date())
			this.now = formatDateDay(new Date())
			setTimeout(function(){
				that.getData(that.date)
			},50)
		},
		mounted() {
			this.open();
		},
		methods: {
			getStepStandard(step){
				return stepStandard(step)
			},
			getData(day){
				this.$http.getBLStep(
				{
					'startTime':that.date,
					'endTime':that.date,
					'sort':"2"
				}).then((res) => {
					var data = res.content
					if(res.content.length!=0){
						this.$http.getAllByDay({
							'startTime':that.date,
							'endTime':that.date
						}).then(result=>{
							that.stepValue = result.stepValue
							that.distance = result.distance
							that.calorie = result.calorie
						})
					}
					that.varList = data
					that.series=[
						{
							"name":"步数",
							"data":[]
						}
					]
					that.categories=[]
					if (data.length!=0) {
						for(var i=0;i<data.length;i++){
							that.categories.push(data[i].startTime.substring(11,16))
							that.series[0].data.push(data[i].sportStep);
						}
					}
					that.close()
				})
			},
			back(){
				uni.navigateBack();
			},
			close:function(){
				this.$refs.loading.close();
			},
			open:function(){
				this.$refs.loading.open();
			},
			bindDateChange(e){
				this.date = e.target.value
				this.getData(this.date)
			}
		}
	}
</script>

<style scoped>
.cu-item{
	height: 108rpx;
}
	.bgpoint {
		width: 20rpx!important;
		height: 20rpx!important;
	}
</style>
